$(function () {     
    $.ajax({
        url: 'http://127.0.0.1:8086/life',
        type: 'GET',
        timeout: 5000,
        success: function (result) {
            var data = result.data[0]
            ggg = []
            ddd_s = []
            time_list1 = [[], [], [], [], []]
            time_list = []
            for (var zs in data) {
                ggg.push(zs)
                ddd = []
                time_data = []
                for (var event in data[zs]) {
                    ddd.push(event)
                    times = data[zs][event]
                    time_data.push(times)
                }
                ddd_s.push(ddd)
                time_list.push(time_data)
            }
            for (const item of time_list) {
                for (let i = 0; i < 5; i++) {
                    time_list1[i].push(item[i])
                }
            }
           
            get_chart5(ggg, ddd, time_list1);




            get_chart5();
        },
        error: function (err) {
            console.log(err);
        }

    });


});
function get_chart5() {
    var div = document.getElementById('ec05_lineBar_timeDistribute');
    var chart = echarts.init(div);
    var option = {
        color: ['#4E99FF', '#ECEF08', '#FF8A8A'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ddd,
            textStyle: {
                color: '#fff' 
            }
        },
        grid: {
            left: '4%',
            right: '3%',
            bottom: '5%',
            containLabel: true
        },
                xAxis: [
            {
                type: 'category',
                data: ggg,
                axisPointer: {
                    type: 'shadow'
                },
            }
        ],
        yAxis: [
            
            {
                type: 'value',
                min: 0, 
                max: 12,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                  },
            },
           
        ],

        series: [
            {
                name: ddd[1],
                type: 'bar',
                data: time_list1[1],
                itemStyle: { color: '#99ccff' }, 
                showBackground: true,

            },
            {
                name: ddd[0],
                type: 'line',
                data: time_list1[0],
                itemStyle: { color: '#ECEF08' }, 
            },
            {
                name: ddd[2],
                type: 'line',
                data: time_list1[2],
                itemStyle: { color: '#ECEF08' }, 
            },
            {
                name: ddd[3],
                type: 'line',
                data: time_list1[3],
                itemStyle: { color: '##ECEF08' }, 
            },
            {
                name: ddd[4],
                type: 'line',
                data: time_list1[4],
                itemStyle: { color: '#ECEF08' }, 
            }
        ]
    };
    chart.setOption(option);

}